<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <title>json-server</title>
</head>
<body>
    <div class="container">
    <table class="table">
        <!-- table的标题 -->
        <caption>文章表</caption>
        <thead>
            <tr>
                <td>序号</td>
                <td>标题</td>
                <td>作者</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <div class="row">
        <div class="col-md-8">1</div>
        <div class="col-md-4">2</div>
    </div>
    <form name="postForm">
        <div class="form-group">
          <label for="titleInput">标题</label>
          <input type="text" name="title" class="form-control" id="titleInput" 
          placeholder="请输入标题" required>
        </div>
        <div class="form-group">
            <label for="authorInput">作者</label>
            <input type="text" name="author" class="form-control" id="authorInput" 
            placeholder="请输入作者" required>
          </div>
          <button type="submit" class="btn btn-default">添加</button>
    </form>
</div>
    <a href="http://baidu.com" id="linkA">去百度</a>


    <script>
        const oForm = document.forms['postForm'];
        // console.log(oForm);
        const oLink = document.getElementById('linkA');
        let id=3;
        const oTbody= document.querySelector('table tbody');

        oForm.addEventListener('submit',function(event) {
            // form 默认会向后端提交数据
            console.log('请不要向后端提交数据');
            event.preventDefault();
            // trim()方法是用来删除字符串两端的空白字符并返回
            const title= oForm["title"].value.trim();
            // console.log(title);
            const author = oForm["author"].value.trim();
            // document 文档中 去查找 css querySelector table tbody
             oTbody.innerHTML +=getPostHtml({id,title,author});
            //`
            //     <tr>
            //         <td>${index}</td>
            //         <td>${title}</td>
            //         <td>${author}</td>
            //     </tr>
            //     `;
                id++;
                // 清空表单
                oForm.reset();
        });


        // 功能的抽象 post对象变成 tr html 字符串  
        const getPostHtml =(post) =>`
                <tr>
                    <td>${post.id}</td>
                    <td>${post.title}</td>
                    <td>${post.author}</td>
                </tr>
                `

        oLink.addEventListener('click',function(event) {
            event.preventDefault();  // 阻止默认行为
        });

        fetch('http://localhost:3000/posts')
        .then(data => data.json())
        .then(data => {
            // 前端和后端通信的数据格式是 json
            // console.log(data);
            oTbody.innerHTML=data.map(post =>getPostHtml(post)).join('')
        })
    </script>
</body>
</html>